<template>
  <div>
    <BusinessTable
      ref="businessTable"
      book-title="流程管理"
      :search-params="searchParams"
      :create-fields="createFields"
      :update-fields="updateFields"
      :table-columns="tableColumns"
      :page-query-url="pageQueryUrl"
      :add-url="mergeUrl"
      :update-url="mergeUrl"
      :delete-url="deleteUrl"
    />

    <a-drawer title="流程设计" width="80%" :visible="showDataDrawer" :body-style="{ paddingBottom: '80px' }" :destroyOnClose="true" @close="closeDataDrawer">
      <FlowDesign ref="FlowDesign" :node="nodeData" :readable2="showDataDrawer" @publish="publish" @cancel="closeDataDrawer" />
    </a-drawer>
  </div>
</template>

<script>
  import BusinessTable from '@/components/BusinessTable';
  import { CREATE_FIELDS, SEARCH_PARAMS, UPDATE_FIELDS } from '@/views/process/index';
  export default {
    name: 'process',
    components: { BusinessTable },
    data() {
      return {
        process: null,
        nodeData: null,
        showDataDrawer: false,
        searchParams: SEARCH_PARAMS,
        createFields: CREATE_FIELDS,
        updateFields: UPDATE_FIELDS,
        tableColumns: [
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '编码',
            dataIndex: 'code',
            key: 'code',
          },
          {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
          },
          {
            title: '流程图',
            dataIndex: 'action',
            customRender: (text, record, index) => {
              return (
                <span class="action-col">
                  <a onClick={() => this.actionClick(record, index)}>编辑</a>
                </span>
              );
            },
            slots: { title: 'action' },
          },
          {
            title: '创建人',
            dataIndex: 'createdBy',
            key: 'createdBy',
          },
          {
            title: '创建日期',
            dataIndex: 'creationDate',
            key: 'creationDate',
          },
          {
            title: '修改人',
            dataIndex: 'lastUpdatedBy',
            key: 'lastUpdatedBy',
          },
          {
            title: '修改日期',
            dataIndex: 'lastUpdateDate',
            key: 'lastUpdateDate',
          },
        ],
        pageQueryUrl: this.api.process.pageQueryProcessDefinition,
        mergeUrl: this.api.process.mergeProcessDefinition,
        deleteUrl: this.api.process.deleteProcessDefinition,
      };
    },
    methods: {
      actionClick(record, index) {
        console.log(index);
        this.process = record;
        //查询流程数据
        this.nodeData = record.definition ? JSON.parse(record.definition) : null;
        this.showDataDrawer = true;
      },
      closeDataDrawer() {
        this.showDataDrawer = false;
      },
      publish(nodeData) {
        this.process.definition = JSON.stringify(nodeData);
        this.process.updateDefinition = true;
        this.axios.post(this.mergeUrl, this.process).then((res) => {
          if (res.code === 'ok') {
            this.$refs.businessTable.reset();
            this.$message.success('发布成功', 3);
            setTimeout(() => {
              this.showDataDrawer = false;
            }, 1000);
          } else {
            this.$message.error(res.message);
          }
        });
      },
    },
  };
</script>

<style scoped></style>
